<template>
  <nav>
    <ul>
      <router-link active-class="highlight" tag="li" to="/film">
        <i class="iconfont icon-yingshi2"></i>
        <span>电影</span>
      </router-link>
      <router-link active-class="highlight" tag="li" to="/cinema">
        <i class="iconfont icon-yingyuan"></i>
        <span>影院</span>
      </router-link>
      <!--      <router-link to="/" tag="li">资讯</router-link>-->
      <router-link active-class="highlight" tag="li" to="/center">
        <i class="iconfont icon-my"></i>
        <span>我的</span>
      </router-link>
    </ul>
  </nav>
</template>

<script>
export default {
  name: 'Tabbar'
}
</script>

<style lang="scss" scoped>
nav {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 13vw;
  line-height: 5.6vw;
  z-index: 100;
  background: #ffffff;

  ul {
    display: flex;
    justify-content: space-around;
    align-items: center;

    li {
      display: flex;
      flex-direction: column;

      span {
        font-size: 3.4vw;
      }

      i {
        padding-top: 1.5vw;
        text-align: center;
        font-size: 6.6vw;
      }
    }
  }
}

.highlight {
  color: #ff5f16;
}
</style>
